import React, { memo } from 'react'
import { NavLink } from 'react-router-dom'
import { RecommendHeaderWrapper } from './sytle'

export default memo(function RecommendHeader(props) {
    const { title, mainLink, childList, moreLink } = props;
    return (
        <RecommendHeaderWrapper>
            <div className="header-left">
                <div className="recommend_hot_image icon"></div>
                <NavLink to={mainLink} className="hot-recommend">{title}</NavLink>
                <div className="link-content">
                    {
                        childList && childList.map((item, index) => {
                            return <span key={item.title}>
                                <NavLink to={item.link + `${item.title}`} className="link-item">{item.title}</NavLink>
                                { (index !== childList.length - 1) ? <span className="line">|</span> : null }
                            </span>
                        }) 
                    }
                </div>
            </div>
            <NavLink to={moreLink} className="header-right">
                更多<i className="recommend_hot_image arraw"></i>
            </NavLink>
        </RecommendHeaderWrapper>
    )
})
